<template>
  <div
    :style="{
      'font-size': 0,
      display: item[childrenName] && item[childrenName].length ? 'block' : 'inline-block',
      'border-top': item[childrenName] && item[childrenName].length && level !== 0 ? '1px solid #eff0f8' : 'none',
    }"
  >
    <div
      :style="{
        'padding-left': `${level * 10}px`,
      }"
      class="tree_item"
    >
      <!-- 展开按钮 -->
      <div
        v-if="item[childrenName] && item[childrenName].length && !item.isExpand"
        @click="handleExpand(true)"
        class="expand"
      ></div>
      <div
        v-else-if="item[childrenName] && item[childrenName].length && item.isExpand"
        @click="handleExpand(false)"
        class="unexpand"
      ></div>
      <span v-else class="margin"></span> <!-- 占位 -->
      <!-- indeterminate: true, -->
      <label
        :class="{
          'is-checked': item[checkedName],
          'checkbox-label': true,
          'disabled': disabled || item.disabled
        }"
      >
        <span class="checkbox-input">
          <span
            :class="{
              'checkbox-inner': true,
              'disabled': disabled || item.disabled,
              'is-checked': item[checkedName],
            }"
          ></span>
          <input
            type="checkbox"
            :checked="item[checkedName]"
            class="checkbox-original"
            @change="handleChecked($event)"
            :disabled="disabled || item.disabled"
          />
        </span>
        <span class="checkbox-text">{{item[valueKey]}}</span>
      </label>
    </div>

    <template v-if="item.isExpand">
      <TreeItem
        v-for="(item, index) in item[childrenName]"
        :key="index"
        :item="item"
        :childrenName="childrenName"
        :valueKey="valueKey"
        :checkedName="checkedName"
        :level="level + 1"
        :disabled="disabled"
      ></TreeItem>
    </template>
  </div>
</template>

<script>
import { findComponentUpward, findBrothersComponents } from './assist.js';

export default {
  name: 'TreeItem',
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    level: {
      type: Number
    },
    valueKey: {
      type: String
    },
    childrenName: {
      type: String
    },
    checkedName: {
      type: String
    },
    disabled: {
      type: Boolean
    }
  },
  data() {
    return {
      tree: findComponentUpward(this, 'CheckTree')
    };
  },
  methods: {
    updateTreeUp(self) {
      const borthers = findBrothersComponents(self, 'TreeItem', false),
        onTrue = borthers.some(borther => {
          return borther.item[this.checkedName] === true;
        });

      if (onTrue) {
        if (self.$parent.$options.name === 'TreeItem') {
          self.$parent.$set(self.$parent.item, this.checkedName, onTrue);
          this.updateTreeUp(self.$parent);
        }
      }
    },
    handleExpand(isExpand) {
      this.$set(this.item, 'isExpand', isExpand);
    },
    handleChecked(e) {
      this.updateTreeDown(this.item, e.target.checked);

      this.updateTreeUp(this);

      if (this.tree) {
        this.tree.emitEvent('on-checked', this.item);
      }
    },
    updateTreeDown(item, checked) {
      this.$set(item, this.checkedName, checked, this.tree.data);

      if (item[this.childrenName] && item[this.childrenName].length) {
        item[this.childrenName].forEach(element => {
          this.updateTreeDown(element, checked);
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tree_item {
  height: 50px;
  box-sizing: border-box;
  font-size: 0;
}
.margin {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 15px;
}
/* 展开按钮 */
.expand,
.unexpand {
  width: 20px;
  height: 20px;
  position: relative;
  display: inline-block;
  background: $themeColor_IE;
  background: $themeColor;
  // background: #4e95ff;
  cursor: pointer;
  border-radius: 50%;
  margin-right: 15px;
  vertical-align: middle;
}
.expand::before,
.unexpand::before {
  content: "";
  width: 12px;
  height: 2px;
  display: block;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.expand::after {
  content: "";
  width: 2px;
  height: 12px;
  display: block;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* checkbox */
.checkbox-label {
  height: 20px;
  color: #666666;
  font-weight: 500;
  font-size: 14px;
  margin: 15px 0;
  vertical-align: middle;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}
.checkbox-label.disabled, .checkbox-inner.disabled {
  cursor: not-allowed;
}
.checkbox-text {
  vertical-align: middle;
  font-size: 14px;
}
.checkbox-input {
  white-space: nowrap;
  outline: none;
  display: inline-block;
  line-height: 1;
  position: relative;
  vertical-align: middle;
  margin-right: 10px;
}
.checkbox-original {
  opacity: 0;
  outline: none;
  position: absolute;
  margin: 0;
  width: 0;
  height: 0;
  z-index: -1;
}
.checkbox-inner {
  display: inline-block;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background-color: #fff;
  top: 50%;
  z-index: 1;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
  cursor: pointer;
}
.checkbox-inner::after {
  box-sizing: content-box;
  content: "";
  border: 3px solid #fff;
  border-left: 0;
  border-top: 0;
  height: 9px;
  width: 5px;
  left: 4px;
  position: absolute;
  top: 1px;
  left: 5px;
  transform: rotate(45deg) scaleY(0);
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
}
.indeterminate .checkbox-inner::before {
  content: '';
  display: block;
  width: 12px;
  height: 2px;
  background: #ffffff;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -6px;
}
.is-checked .checkbox-inner {
  background: $themeColor_IE;
  background: $themeColor;
  // background: #4e95ff;
}
.is-checked .checkbox-inner::after {
  transform: rotate(45deg) scaleY(1);
}
.is-checked.indeterminate .checkbox-inner::after {
  transform: rotate(45deg) scaleY(0);
}
.is-checked.checkbox-label {
  color: $themeColor_IE;
  color: $themeColor;
  // color: #4e95ff;
}
</style>
